import { Card, Button, Checkbox, Form, Input, message } from 'antd';
import logo from '@/assets/logo.png'
import { useNavigate } from 'react-router-dom'
//导入样式
import './index.scss'
import { useStore } from '@/store'
function Login() {
    const { loginStore } = useStore()
    const navigate = useNavigate()
    const onFinish = async (values) => {
        console.log('Success:', values);
        console.log(loginStore, "loginStore")
        //登录
        const { username, password } = values
        try {
            await loginStore.getToken({
                mobile: username,
                code: password
            })
            //跳转首页
            navigate('/', { replace: true })
            //提示用户信息
            message.success('登录成功');
        } catch (e) {
            message.error(e.response.message || '登录失败')
        }

    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    return (
        <div className='login_iocn'>
            <Card className='login-container'>
                <img className='login-logo' src={logo}></img>
                <div className='login-form'>
                    <Form
                        validateTrigger={['onBlur', 'onChange']}
                        name="basic"
                        labelCol={{
                            span: 6,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="Username"
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your username!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="Password"
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your password!',
                                },
                                {
                                    len: 6,
                                    message: '密码长度为6位',
                                    validateTrigger: 'onBlur'
                                },
                            ]}
                        >
                            <Input.Password />
                        </Form.Item>

                        <Form.Item
                            name="remember"
                            valuePropName="checked"
                            wrapperCol={{
                                offset: 6,
                                span: 16,
                            }}
                        >
                            <Checkbox>我已经阅读并同意【用户协议】和【隐私政策】</Checkbox>
                        </Form.Item>

                        <Form.Item
                            wrapperCol={{
                                offset: 6,
                                span: 16,
                            }}
                        >
                            <Button className='submit' type="primary" htmlType="submit">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </Card>
        </div>
    )
}

export default Login